<template>
  <div class="course-more">
    <div class="course-list">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        :immediate-check="false"
      >
        <div class="records" v-if="displayCourseList.length">
          <div class="item"
            v-for="(item, index) in displayCourseList"
            :key="index"
            @click="clickDetail(item)"
          >
            <div class="records_item_title">{{item.className}}（{{item.studentName}}）</div>
            <div class="records_item_remarks" v-if="item.remarks">{{item.remarks}}</div>
            <div class="records_item_detail">
              <div class="qixian">
                <div class="detail_title">上课开始时间:</div>
                <div class="num mainColor">{{item.startTime}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="no-data" v-else-if="!loading">
          暂无数据
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
import { NavBar, Toast, List } from 'vant'

export default {
  name: 'CourseMore',
  components: {
    [NavBar.name]: NavBar,
    [List.name]: List
  },
  data() {
    return {
      allCourseList: [], // 存储所有数据
      displayCourseList: [], // 当前显示的数据
      loading: false,
      finished: false,
      pageNum: 1,
      pageSize: 10
    }
  },
  created() {
    this.getAllCourseList()
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    getAllCourseList() {
      this.loading = true
      this.$http.getCourseWeekList().then(res => {
        if (res.data.result && res.data.result.length > 0) {
          this.allCourseList = res.data.result
          // 初始化显示第一页数据
          this.displayCourseList = this.allCourseList.slice(0, this.pageSize)
          // 如果总数据量小于等于第一页显示数量，则标记为已完成
          if (this.allCourseList.length <= this.pageSize) {
            this.finished = true
          }
        } else {
          this.allCourseList = []
          this.displayCourseList = []
          this.finished = true
        }
        this.loading = false
      }).catch(err => {
        console.log(err, 'err')
        this.$toast(err.data.message)
        this.loading = false
      })
    },
    onLoad() {
      // 滑动到底部时触发加载更多
      setTimeout(() => {
        this.pageNum++
        const startIndex = (this.pageNum - 1) * this.pageSize
        const endIndex = this.pageNum * this.pageSize
        const newData = this.allCourseList.slice(startIndex, endIndex)

        if (newData.length > 0) {
          this.displayCourseList = [...this.displayCourseList, ...newData]
        }

        // 检查是否还有更多数据
        if (this.displayCourseList.length >= this.allCourseList.length) {
          this.finished = true
        }

        this.loading = false
      }, 500)
    },
    clickDetail(item) {
      this.$router.push({
        name: 'class-detail',
        params: {
          classId: item.classId,
          courseScheduleId: item.courseScheduleId,
          id: item.id,
          studentId: item.studentId,
          startTime: item.startTime,
          endTime: item.endTime,
          from: 'courseMore'
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.course-more {
  width: 100%;
  height: 100vh;
  background: #f5f5f5;
  overflow-y: auto;

  .course-list {
    padding: 0 20px;
    box-sizing: border-box;
    min-height: 100%;

    .records {
      .item {
        min-height: 100px;
        position: relative;
        margin-top: 10px;
        padding: 18px 20px;
        background: #fff;
        box-sizing: border-box;
        box-shadow: 0 4px 15px 0 rgba(0,0,0,0.09);
        border-radius: 4px;
        display: flex;
        flex-direction: column;

        .records_item_title {
          width: 100%;
          min-height: 25px;
          font-weight: 900;
          text-align: left;
          color: #333;
        }

        .records_item_remarks {
          width: 100%;
          color: #999;
          margin-top: 5px;
          font-size: 14px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }

        .records_item_detail {
          margin-top: 10px;
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .qixian {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
          }

          .num {
            font-size: 14px;
            font-weight: bolder;
          }

          .detail_title {
            font-size: 14px;
            color: #999;
          }
        }
      }
    }

    .no-data {
      text-align: center;
      color: #999;
      font-size: 14px;
      padding: 20px 0;
    }
  }
}
</style>
